<template>
  <div class="yypz">
    <Card>
      <div slot="cRight" style="margin-right: 20px">
        <el-button type="primary" size="mini" @click="dialogVisible = true">
          部署流程设计
        </el-button>
      </div>
      <section>
        <Table :tableData="tableData" @btnClick="handleClick"></Table>
        <Pagination :total="tableData.row.length"></Pagination>
      </section>
    </Card>

    <el-dialog
      close="dialog"
      title="部署流程设计"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <Xzpz />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            $message({
              message: '发布成功',
              type: 'success'
            })
          "
        >
          发 布
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Xzpz from './components/Xzpz'
export default {
  components: {
    Table,
    Card,
    Pagination,
    Xzpz
  },

  data() {
    return {
      dialogVisible: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '名称'
          },
          {
            prop: 'colC',
            label: '时间'
          },
          {
            prop: 'colD',
            label: '状态'
          },
          {
            prop: 'colE',
            label: '备注'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            width: '300px',
            btnList: [
              { label: '服务编排' },
              { label: '删除' },
              { label: '发布' }
            ]
          }
        ],
        row: [
          {
            colA: '5698',
            colB: 'abs-server-api',
            colC: '2020-11-12 10:51:07',
            colD: '已发布',
            colE: 'web'
          },
          {
            colA: '5699',
            colB: 'bboss-product-api',
            colC: '2020-11-11 09:01:22',
            colD: '已发布',
            colE: 'tomcat'
          },
          {
            colA: '6000',
            colB: 'bboss-server-config',
            colC: '2020-11-13 14:22:01',
            colD: '已发布',
            colE: 'web_dis'
          },
          {
            colA: '6001',
            colB: 'statge-server-web',
            colC: '2020-11-14 02:09:54',
            colD: '已发布',
            colE: 'web_fsk'
          }
        ]
      }
    }
  },

  methods: {
    handleClick(index) {
      if (index === 0) this.dialogVisible = true
      if (index === 2)
        this.$message({
          message: '发布成功',
          type: 'success'
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
